<script setup>
// 简单写法
// const username = defineProps(['username'])
// 完整写法
import {inject} from "vue";

const obj = defineProps({
  username: {
    type: String,
    default: '王五',
    required: true
  },
  updateUser: Function,
  city: String,
  down: String
})

const updateU = defineEmits(['updateUsername', 'updateCity', 'update:down'])
const updateUsername = () => {
  updateU('updateUsername', '赵六')
  // obj.username = 'tony'
}
console.log(obj.username)

defineExpose({updateUsername})


// inject 获取上层组件，通过provide 提供的数据
const age = inject('age')
console.log(`age = ${age}`)

// 通过inject 获取 email 属性和修改email属性的函数
const email = inject('email')
console.log(`email = ${email.value}`)
const updateEmail = inject('updateEmail')
// updateEmail('9999')
// console.log(`email = ${email.value}`)

defineOptions({
  name: 'xxxComponent',
  // 这里面可以定义 原生的 export default 内的选项式API 代码，
  // 简单当成另外开了一个 script 标签 的export default 内区域
})

const address = defineModel()

// const cityEmit = defineEmits(['updateCity'])
const updateCityLocal = (v) => {
  console.log(`修改city city = ${v}`)
  updateU("updateCity", v)
}

const updateDown = (v) => {
  updateU('update:down', v)
}
</script>


<template>
  <div class="son">
    {{ username }}
    email: {{ email }}
  </div>
  <button @click="updateUsername">修改username</button>
  <button @click="updateUser('田七')">不使用emit修改username</button>
  <button @click="updateEmail(999)">修改email</button>
  <button @click="updateDown('巴南')">修改down</button>

  地址：<input :value="address" @input="address = $event.target.value"/>
  城市：<input :value="city" @input="updateCityLocal($event.target.value)"/>
</template>

<style scoped>

</style>
